<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewpor" content="width=deice-width,initial-scale=1.0">
    <title>CSS练习</title>
    <style>
        h2 {
            font-family: "glyph-correction", "Noto Serif SC", "EB Garamond", serif;

        }
        }

        li[title="这是说明文字"] {
            color: blue;
        }

        .border {
            border-bottom: 1px dashed red;
            width: 100px;
        }

       
        #demo {
            color: coral;
        }

        a:visited {
            color: slateblue;
        }

        article:first-child {
            color: #ddd;
        }

        ol ol li {
            color: springgreen;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: "Noto Serif SC";
        }
    </style>

    <link rel="styleshect" href="../pubiic/css/#main.css">

</head>

<body>
    <header>
        <h1>CSS练习</h1>
    </header>
    <mian>
        <section>
            <h2>使用样式表的三种方式</h2>
            <ol>
                <li>外部样式表</li>
                <li>内部样式表</li>
                <li style="color: brown;">内嵌样式表</li>
            </ol>
        </section>
         <section>
            <h2 class="border">选择符</h2>
            <ol>
                <li>简单选择符</li>
                <ol>
                    <li style="color: orange;">类型选择符</li>
                    <li>通配选择符</li>
                    <li style="color: darkslategray;">属性选择符</li>
                    <li class="border" title="这是说明文字">属性选择符</li>
                    <li style="color: darkblue;">类选择符</li>
                    <li id="demo">ID</li>
       
                    <li><a href="#">伪类选择符</a></li>
                    <ol>
                        <li>用户行为伪类选择符</li>
                        <li>目标伪类选择符</li>
                        <li>语言伪类选择符</li>
                        <li>UI伪类选择符</li>
                        <li>结构伪类选择符</li>
                        <li style="color: darkmagenta;">链接伪类选择符</li>
                    </ol>
                </ol>
                <li>组合选择符</li>
             </ol>
            <article>
                <p>Here am I </p>
                <p>Yet another goodbye! </p> 
                <p>He says Adiós, says Adiós,</p> 
                <p>And do you know why</p> 
                <p>She won't break down and cry?</p> 
                <p>- she says Adiós, says Adiós, Goodbye.</p> 
                    
                <p> One by one my leaves fall.</p> 
                <p> by one my tales are told. </p> 
                    
                <p> It's no lie </p> 
                <p> She is yearning to fly. </p> 
                <p> She says Adiós, says Adiós, </p> 
                <p> And now you know why </p> 
                <p> He's a reason to sign </p> 
                <p> - she says Adiós, says Adiós, Goodbye.</p>  
                    
                <p> One by one my leaves fall. </p> 
                <p> One by one my tales are told.</p>  
                    
                <p> My, oh my! </p> 
                <p> She was aiming too high. </p> 
                <p> He says Adiós,</p>  
                <p> And now you know why </p> 
                <p> There's no moon in her sky</p>  
                <p> - he says Adiós, says Adiós, Goodbye.</p>  
                    
                <p> No Goodbyes </p> 
                <p>For love brightens their eyes</p>  
                <p> Don't say Adiós, say Adiós,</p>  
                <p>And do you know why </p> 
                <p>There's a love that won't die?</p>  
                <p> - don't say Adiós, say Adiós, Goodbye.</p>  
                    
                <p>- don't say Adiós, say Adiós, Goodbye.</p>  
                <p> - don't say Adiós, say Adiós, Goodbye.</p>  
                <p> - don't say Adiós, say Adiós, Goodbye</p>
            
            </article>
        </section>
    </mian>
    <footer></footer>
</body>

</html>